<template>
	<div class="comment-reply">
		<van-nav-bar class="nav-bar" :title="`${Replycomments}条回复`">
		      <van-icon slot="left" name="cross" @click="handleClose" />
		</van-nav-bar>
		<!-- 当前评论 -->
		<comment-item :comment="comment" :reply="false"></comment-item>
		<!-- 所有评论 -->
		<van-cell title="所有回复"/>
		<!-- 评论列表 -->
		<comment-list
		:type="'c'"
		:art_id="comment.com_id"
		v-model="comments"
		:total-count.sync="Replycomments"
		@click-reply="handleClickReply"
		></comment-list>
		<!-- 评论回复 -->
		<div class="footer">
			<van-button
				size="small"
				round
				class="comment-btn"
				@click="writeComment"
			>写评论</van-button>
		</div>	
		<!-- 发布评论回复 -->
		<van-popup
			v-model="isPostShow"
			position="bottom"
		>
			<comment-post
				v-if="isPostShow"
				:articleId="target"
				:art_id = "articleId"
				@post-commented="handleComment"
				:reply-to="replyTo"
			></comment-post>
		</van-popup>
	</div>
</template>

<script>
	
	import commentItem from './commentItem.vue'
	import commentList from './commentList.vue'
	import commentPost from './comment-post.vue'
	export default {
		name:"commentReply",
		props:{
			comment:{
				type:Object,
				required:true
			},
			articleId:{
				type:[String,Number,Object],
				required:true
			}
		},
		components:{
			commentItem,
			commentList,
			commentPost
			
		},
		data(){
			return {
				isPostShow:false,
				target:this.comment.com_id,
				comments:[],
				Replycomments:0,
				replyTo:{}
			}
		},
		methods:{
			
			handleClose(){
				this.$emit('close-click')
			},
			writeComment(){
				this.target = this.comment.com_id
				this.replyTo = null
				this.isPostShow=true
			},
			handleComment(obj){
				this.comments.unshift(obj)
				this.Replycomments++
				this.comment.reply_count++
				this.isPostShow=false
			},
			handleClickReply(comment){
				this.target = comment.com_id
				this.replyTo = comment
				this.isPostShow=true
			}
		},
		computed:{
		
		}
	}
</script>

<style scoped lang="less">
	.footer{
		position:fixed;
		left:0;
		right: 0;
		bottom: 0;
		height:44px;
		box-sizing:border-box;
		border:1px solid #d8d8d8;
		display:flex;
		background-color:#fff;
		justify-content:space-around;
		align-items:center;
		text-align:center;
		.comment-btn{
			width:60%;
		}
	}
	
</style>
